/* 
  增删改查  -  crud 增加(Create)、读取(Read)、更新(Update)和删除(Delete)
  1 查询 
    1 定义一个函数
    2 发送请求 获取数据 渲染页面

  2 增加
    1 弹出和关闭 模态框 （2种方式）
      1 通过给标签增加属性即可 
        1 显示 data-bs-toggle="modal" data-bs-target="#addModal" 和 真实的模态框div的id 联系 
        2 隐藏 data-bs-dismiss="modal"
      2 通过 调用js代码来实现
        1 $("模态框的选择器").modal("show")
        2 $("模态框的选择器").modal("hide")
    2 初始化 模态框中 省市区 三个组件 （和早上讲额外作业业务很类似 ）
      1 初始化 组件函数
        1 发送请求拿数据 完成 组件的渲染 
      2 给省绑定change 事件触发了获取对应市 
      3 给市绑定change 事件触发了获取对应县
    3 给表单绑定提交事件
      1 获取表单，绑定事件
      2 阻止默认行为
      3 使用技巧 快速获取表单数据
      4 合法性校验 - 非空即可 
      5 调用接口 完成新增
      6 提示用户 恭喜用户
      7 关闭模态框
      8 刷新数据
      9 清空新增表单 
  3 编辑
    1 直接点击 修改按钮
    2 弹出 模态框 
    3 标题 -> 修改学员信息
    4 表单显示 待编辑的数据
      1 在生成 修改标签的时候，存一个 数据的 id 上去 
      2 在事件触发的时候获取id 
      3 调用接口 获取待编辑的id 对应 学员信息 obj 
      4 把obj 数据  设置到对应 表单标签中 
    5 点击 确认修改 按钮
      。。。。
  4 删除
    1 给删除绑定点击事件
    2 判断当前点击的是不是删除标签
    3 询问用户是否确定删除
    4 获取被删除数据的id
    5 发送请求 执行删除
    6 刷新数据 
 */

// 获取dom元素
const tbody = document.querySelector("tbody");
const province = document.querySelector("select[name=province]");
const city = document.querySelector("select[name=city]");
const county = document.querySelector("select[name=county]");
// 后期 form 同时为 新增和编辑服务
const form = document.querySelector(".add-form");
// 获取 添加按钮
const addBtn = document.querySelector(".add-btn");

// 定义一个全局变量 id 表示修改的id　　－＞　隐藏域
// let id;

// 查询数据
async function getData() {
  const result = await axios({ url: "/student/list" });
  // console.log(result);
  const html = result.data.data.reduce((beforeHTML, item) => {
    const {
      id,
      name,
      age,
      sex,
      group,
      phone,
      salary,
      truesalary,
      province,
      city,
      county,
    } = item;
    return (
      beforeHTML +
      `
    <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm update-btn" data-id="${id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="${id}">删除</button>
        </td>
      </tr>
    `
    );
  }, "");
  // 渲染标签
  tbody.innerHTML = html;
}

// 初始化 省市区组件的函数
async function initSelect() {
  // 操作 省
  getSelectData("/geo/province", {}, "省", province);
}

// 封装统一请求城市数据和渲染标签函数
// url 请求的路径
// params 请求参数
// text 默认显示的文本
// target 给生生成的标签
async function getSelectData(url, params, text, target) {
  const result = await axios({
    url,
    params,
  });
  const html = result.data.reduce((beforeHTML, item) => {
    return beforeHTML + `<option value="${item}">${item}</option>`;
  }, `<option value=''>--${text}--</option>`);
  target.innerHTML = html;
}

getData();
initSelect();

// 绑定 province change事件
province.addEventListener("change", async function (e) {
  getSelectData("/geo/city", { pname: province.value }, "市", city);
  // 重置 区 标签
  // county.innerHTML = `<option value="">--县--</option>`;
  county.innerHTML = county.firstChild.outerHTML; // firstChild 获取 county第一个孩子 option，outerHTML 获取dom对应html模样
});

// 绑定 city change事件
city.addEventListener("change", async function (e) {
  getSelectData(
    "/geo/county",
    { pname: province.value, cname: city.value },
    "县",
    county
  );
});

// 给表单绑定提交事件
form.addEventListener("submit", async function (e) {
  e.preventDefault();
  // 快速获取表单的数据
  // 1 jquery 返回数据 字符串 a=1&b=&c=3
  // 2 form-serialize   a=1&b=2&c=3   === {a:1,b:'',c:3}   if(obj.b)
  // 3 formdata  需要自己去处理
  // 表单的验证 非空
  const data = serialize(form, { hash: true, empty: true }); // hash 获取对象  empty 空的字段也会被获取到
  // 判断当前是新增还是编辑
  const formTitle = document.querySelector("#addModalLabel").innerText;
  if (formTitle === "添加新学员") {
    delete data.id;
  }

  // 对对象做遍历，判断里面的值，如果有发现一个 为 空，就不再往下执行了，弹出提示框给用户
  // let isOK = true; // 默认字段全部都合法
  for (const key in data) {
    if (!data[key]) {
      // 不合法
      // isOK = false;
      toastr.error("请检查你的字段", "提示");
      // 终止 整改 提交事件的执行
      return;
      // break; // 只会终止 for循环，但是 for下面的代码还会执行
    }
  }

  let result;
  if (formTitle === "添加新学员") {
    // 调用接口，完成新增
    // 新增不需要带上id的 所以删除id即可
    // delete data.id;
    result = await axios({ url: "/student/add", method: "post", data });
  } else if (formTitle === "修改学员") {
    // 修改要多一个id属性
    // data.id = id;
    result = await axios({ url: "/student/update", method: "put", data });
  }

  if (result.data.code === 0) {
    toastr.success(result.data.message, "恭喜");
    $("#addModal").modal("hide");
    getData();
    form.reset(); // 重置 清空表单  dom.value=""
    // 下拉列表需要手动重置
    city.innerHTML = city.firstChild.outerHTML;
    county.innerHTML = county.firstChild.outerHTML;
  }
});

// 给编辑按钮绑定事件 事件委托
// 给删除按钮绑定事件 事件委托
tbody.addEventListener("click", async function (ev) {
  // 获取被点击的真正的元素
  const target = ev.target;
  // 判断点击的是不是编辑按钮
  if (target.classList.contains("update-btn")) {
    // console.log("修改");
    $("#addModal").modal("show");
    document.querySelector("#addModalLabel").innerText = "修改学员";
    // 获取身上id属性
    let id = target.dataset.id;
    // 获取id对应的学员数据
    const result = await axios({ url: "/student/one", params: { id } });
    // 获取数据
    const obj = result.data.data;

    // 提前给 city 和 county 初始化
    // obj.province
    await getSelectData("/geo/city", { pname: obj.province }, "市", city);

    await getSelectData(
      "/geo/county",
      { pname: obj.province, cname: obj.city },
      "县",
      county
    );

    // 遍历，挨个给表单赋值
    for (const key in obj) {
      const formEle = document.querySelector(`[name=${key}]`);
      // formEle 不一定存在，所以需要先判断存在，然后再去使用
      // 单选框，应该是设置 checked属性，而不是 value属性
      if (formEle && key !== "sex") {
        formEle.value = obj[key];
      }
    }
    // 单独去设置 性别的选中
    // 找到性别单选框 同时  value 和 obj.sex 相同
    document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true;
  } else if (target.classList.contains("delete-btn")) {
    if (confirm("您确定删除吗")) {
      const id = target.dataset.id;
      const result = await axios({
        url: "/student/delete",
        method: "delete",
        params: { id },
      });
      if (result.data.code === 0) {
        toastr.success("删除成功", "提示");
        getData();
      }
    }
  }
});

// 添加按钮点击
addBtn.addEventListener("click", function (e) {
  $("#addModal").modal("show");
  document.querySelector("#addModalLabel").innerText = "添加新学员";
});
